<template>
  <el-dialog
    title="新增材料"
    width="800px"
    custom-class="gov-application-materials-add"
    :append-to-body="true"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div v-loading="loading.dict">
      <dynamicForm :formItemData="formItemData" v-if="!loading.dict" ref="dynamicForm" />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import axios from 'axios';
  import dynamicForm from '../../dynamicForm';
  import formItemData from './formItemData';
  export default {
    components: { dynamicForm },
    props: {
      visible: {
        type: Boolean
      },
      eventId: {
        type: String
      },
      materialType: {
        type: Array
      },
      materialForm: {
        type: Array
      },
      materialSourceChannel: {
        type: Array
      },
      materialWhether: {
        type: Array
      }
    },
    data() {
      return { formItemData, loading: { dict: true } };
    },
    watch: {
      visible: {
        handler(val) {
          if (!val) {
            this.$refs['dynamicForm'].resetField();
          }
        }
      },
      materialType: {
        handler(val) {
          if (val && val.length > 0) {
            let index1, index2, index3, index4;
            this.formItemData.forEach((e, index) => {
              if (e.eicCode === 'fromId') {
                index1 = index;
              } else if (e.eicCode === 'materialTypeId') {
                index2 = index;
              } else if (e.eicCode === 'channelId') {
                index3 = index;
              } else if (e.eicCode === 'necessity') {
                index4 = index;
              }
            });

            const item1 = this.formItemData[index1];
            item1.tags = this.materialForm;

            const item2 = this.formItemData[index2];
            item2.tags = this.materialType;

            const item3 = this.formItemData[index3];
            item3.tags = this.materialSourceChannel;

            const item4 = this.formItemData[index4];
            item4.tags = this.materialWhether;
          }
          this.loading.dict = false;
        }
      }
    },
    computed: {},
    methods: {
      handleClose() {
        this.$emit('update:visible', false);
      },
      async submit() {
        const obj = this.$refs['dynamicForm'].getFormData();
        if (obj.valid) {
          obj.data.eventId = this.eventId;
          const { data } = await axios.request({
            url: '/api/v1/event/material/material',
            method: 'post',
            data: obj.data
          });
          if (data.code === 200) {
            this.$message.success('创建材料成功');
            this.handleClose();
            this.$emit('addSuccess');
          }
        }
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss">
  .gov-application-materials-add {
    .el-dialog__body {
      height: 400px;
      overflow-y: auto;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
</style>
